const HtmlWebpackPlugin = require("html-webpack-plugin");
const fs = require("fs");
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');//html 变量
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const webpack = require('webpack');
const path = require("path");
const configs = require("./config");

process.env.PUBLIC_URL = ".";

module.exports = {
    devtool: configs.useSourceMap?"source-map":false,
    entry: configs.indexJs,

    output: {
        publicPath:configs.urlPath,
        path:configs.appDirectory,
        pathinfo: true,
        filename: configs.outputJs,
        // publicPath:config.appDirectory
        // libraryTarget: 'commonjs',
    },

    resolve:{
        plugins: [
            //解决js应用src以外的modules的问题
            new ModuleScopePlugin(configs.srcPath, [configs.appDirectory]),
        ],
    },

    module: {
        rules: [
            {
                oneOf: [
                    {
                        test: /\.(js|jsx)$/,
                        include: configs.srcPath,
                        loader: "babel-loader",
                        options: {
                            sourceMap: true,
                            //stage-1 支持成员变量
                            presets: ['es2015', 'react', "stage-1"],
                            plugins: [
                                //装饰器支持
                                "transform-decorators-legacy",
                            ]
                        },
                    },
                    {
                        /**
                         * less-loader 是将less文件编译成css
                         * sass-loader 是将sass文件编译成css
                         * css-loader 是处理css文件中的url()等
                         * style-loader 将css插入到页面的style标签顺便告诉你
                         */
                        test: /\.(css|less)$/,
                        loader: ExtractTextPlugin.extract(
                            Object.assign(
                                {
                                    fallback: {
                                        loader: require.resolve('style-loader'),
                                        options: {
                                            hmr: false,
                                        },
                                    },
                                    use: [
                                        {
                                            loader: require.resolve('css-loader'),
                                            options: {
                                                importLoaders: 1,
                                                minimize: true,
                                                sourceMap: configs.useSourceMap,
                                            },
                                        },
                                        {
                                            loader: require.resolve('postcss-loader'),
                                            options: {
                                                ident: 'postcss',
                                                plugins: () => [
                                                    require('postcss-flexbugs-fixes'),
                                                    autoprefixer({
                                                        browsers: [
                                                            '>1%',
                                                            'last 4 versions',
                                                            'Firefox ESR',
                                                            'not ie < 9', // React doesn't support IE8 anyway
                                                        ],
                                                        flexbox: 'no-2009',
                                                    }),
                                                ],
                                            },
                                        },
                                        {
                                            loader: require.resolve('less-loader'),
                                        },
                                    ],
                                },
                                {publicPath: Array(configs.outputCss.split('/').length).join('../')}
                            )
                        ),
                    },

                    {
                        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/],
                        use:[
                            {
                                loader: require.resolve("file-loader"),
                                options: {
                                    publicPath:configs.urlPath+"/",
                                    limit: 1000,
                                    name:configs.outputImage
                                },
                            }
                        ],
                    },
                ]
            },
        ]
    },

    devServer: {
        inline:true,
        port: configs.port,
        compress: true,
        publicPath:configs.urlPath+"/",
        open:true,
        index: '/view/index.html'
    },

    plugins: [
        //为HTML定义变量 使用：%PUBLIC_URL%
        new InterpolateHtmlPlugin({ NODE_ENV: 'env', PUBLIC_URL: configs.urlPath}),
        new HtmlWebpackPlugin({
            inject:true,
            template: configs.indexHtml,
            filename: configs.outputHtml,
            title: "测试webpack"
        }),
        //额外生成文件，这里用来将CSS从JS中分离
        new ExtractTextPlugin({
            filename: configs.outputCss
        }),
        //压缩代码，参数一般用不上
        new webpack.optimize.UglifyJsPlugin({
            sourceMap: configs.useSourceMap,
        }),
        new webpack.DefinePlugin({
            PUBLIC_URL:JSON.stringify(configs.urlPath)
        }),
        // new ManifestPlugin({
        //     fileName: 'asset-manifest.json',
        // }),
    ]
};
